<template>
  <view class="container">
    <view class="top">
      <view class="checkbox">
        <uni-data-checkbox v-model="state.select_type" :localdata="typeListOption" @change="typeChange"
          mode="tag"></uni-data-checkbox>
      </view>
      <view class="checkbox">
        <uni-data-checkbox v-model="state.select_subject" :localdata="subjectListOption" @change="subjectChange"
          mode="tag" style="font-size: 30rpx;"></uni-data-checkbox>
      </view>
      <view class="checkbox">
        <text class="text">已做过题：</text>
        <uni-data-checkbox v-model="state.select_has_done" :localdata="hasDoneDOption"
          @change="hasDoneChange"></uni-data-checkbox>
      </view>
    </view>
    <view class="left-right">
      <scroll-view scroll-y class="left">
        <uni-collapse ref="collapse" v-model="collapse_value">
          <uni-collapse-item v-for="(item_year, index_year) in yearMonthList" :key="index_year" :title="item_year.name"
            :open="false" :show-animation="true" border>
            <view v-for="(item_month, index_month) in item_year.children" :key="index_month"
              @tap="onClickMonth(item_month.year_month, item_month.id)" class="item"
              :class="{ active: item_month.id === state.month_id }">
              <text class="name">{{ item_month.name }}</text>
            </view>
          </uni-collapse-item>
        </uni-collapse>
      </scroll-view>
      <view class="right">
        <scroll-view scroll-y class="card" enable-flex>
          <uni-card v-for="(item, index) in exercisePaperList" :key="index" :title="item.name" class="guide-content"
            @click="onClickCard(item)">
            <text class="blue_color">已做{{ item.has_done }}题，</text>
            <text class="green_color">共有{{ item.questions_amount }}题</text>
          </uni-card>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { checkItem, ExercisePaperItem, YearMonthItem } from '@/types/home'
import { getExercisePaperAPI, getYearMonthAPI } from '@/services/home'
import UniDataCheckbox from '@dcloudio/uni-ui/lib/uni-data-checkbox/uni-data-checkbox.vue'
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'

const collapse_value = ref<any[]>(['0'])

const yearMonthList = ref<YearMonthItem[]>([])
const exercisePaperList = ref<ExercisePaperItem[]>([])
// 存放响应式变量
const state = reactive({
  select_type: 1,
  select_subject: 1,
  select_has_done: 1,
  select_paper: 1,
  month_id: 1,
  year_month: ['2024年', '1月'],
})
// 选择框列表
const subjectListOption = ref<checkItem[]>([
  { text: '信息', value: 1, disable: false },
  { text: '通用', value: 2, disable: false },
  { text: '职高', value: 3, disable: false },
])
let typeListOption = ref<checkItem[]>([
  { text: '按知识点', value: 1, disable: false },
  { text: '按试卷', value: 2, disable: false },
])
// 已做题选择框列表
const hasDoneDOption: checkItem[] = [
  { text: '还要', value: 1, disable: false },
  { text: '跳过', value: 2, disable: false },
]
// 试卷点击事件，重新获取该试卷的试题
const onClickMonth = (year_month: string[], id: number) => {
  console.log('试卷改变了：', id)
  console.log('改年月信息', year_month)
  state.month_id = id
  state.year_month = year_month
  getExercisePaperData()
}
// 组卷方式改变了，切换到该页面或tarbar，根据选择的值判断
const typeChange = (e: any) => {
  console.log('组卷方式改变：', e)
  if (parseInt(e.detail.value) == 1) {
    uni.switchTab({
      url: `/pages/puzzle/knowledge_exercise_step_one`,
    })
  }
}
// 学科改变了,重新获取该学科的知识点
const subjectChange = (e: any) => {
  console.log('学科改变：', e.detail.value)
  state.select_subject = e.detail.value
  getExercisePaperData()
}
// 最做题目筛选改变了
const hasDoneChange = (e: any) => {
  state.select_has_done = e.detail.value
}
// 点击卡片，进入该试卷的题目页面
const onClickCard = (paper: ExercisePaperItem) => {
  let paper_id: number = paper.id
  let paper_name: string = paper.name
  let questions_amount: number = paper.questions_amount
  console.log('切换页面')
  if (questions_amount > 0) {
    uni.navigateTo({
      url: `/pages/puzzle/exercise_step_two?has_done=${state.select_has_done}&id=${paper_id}&name=${paper_name}&type=paper`,
    })
  } else {
    uni.showToast({ icon: 'error', title: '该试卷暂无题目' })
  }
}

// 获取某个学科下的所有练习试卷（简洁结构）
const getExercisePaperData = async () => {
  // 获取知识点api的参数
  let paperParams = {
    subject_id: state.select_subject,
    year: state.year_month[0],
    month: state.year_month[1],
  }
  console.log('要发送获取练习卷参数', paperParams)
  const res = await getExercisePaperAPI(paperParams)
  console.log('练习测试卷获取：', res)
  if (res.code == 200) {
    exercisePaperList.value = res.data.results
  } else {
    uni.showToast({ icon: 'error', title: '获取练习测试卷失败' })
  }
}
// 获取年月列表，用于显示左边栏目
const getYearMonthData = async () => {
  const res = await getYearMonthAPI()
  console.log('年月数组：', res)
  if (res.code == 200) {
    yearMonthList.value = res.data.results
  } else {
    uni.showToast({ icon: 'error', title: '获取年月数组失败' })
  }
}
// 页面初始化加载事件
onLoad(async () => {
  // console.log('页面加载')
  getYearMonthData()
  getExercisePaperData()
})
// 自定义下拉刷新被触发
onPullDownRefresh(async () => {
  await Promise.all([getYearMonthData(), getExercisePaperData()])
  // 停止页面加载动画
  setTimeout(() => {
    uni.stopPullDownRefresh()
  }, 1000)
})
</script>

<style lang="scss" scoped>
.container {
  margin: 1rpx;
  padding: 1rpx;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 400rpx;
}

.left-right {
  display: flex;
  flex: 1;
  min-height: 400rpx;
}

.checkbox {
  display: flex;
  flex-flow: row nowrap;
  justify-content: left;
  align-items: center;
  font-size: 32rpx;
}

.left {
  // display: flex;
  flex: none;
  width: 180rpx;
  overflow: hidden;
  background-color: #f6f6f6;

  .item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80rpx;
    font-size: 25rpx;
    color: #596c63;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      left: 42rpx;
      bottom: 0;
      width: 96rpx;
      border-top: 1rpx solid #e3e4e7;
    }
  }

  .active {
    background-color: fff;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 8rpx;
      height: 100%;
      background-color: #0bba88d7;
    }
  }

  .title {
    font-size: 28rpx;
    font-weight: bold;
    overflow: hidden;
  }
}

.left .item:last-child::after,
.left .active::after {
  display: none;
}

.name {
  padding: 3rpx;
  font-size: 25rpx;
  color: #333;
}

.right {
  overflow-y: scroll;
  font-size: 28rpx;
  padding: 1rpx;

  .button_content {
    font-size: 25rpx;
    text-align: left;
  }
}

.subject {
  font-size: 30rpx;
  display: flex;
  flex-flow: row nowrap;
}

.type_select {
  font-size: 30rpx;
  display: flex;
  flex-flow: row nowrap;
}

.text {
  font-size: 30rpx;
}

.content {
  font-size: 27rpx;
  display: flex;
  flex-flow: row wrap;
  height: 100vh;
}
</style>
